@charset "utf-8";

@import "reset";

$font-size:40;

@function r($px){
    @return $px/$font-size*1rem;
}

html,body{
    width: 100%;
    height: 100%;
    position: relative;
}

.web{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../img/wedding-bg.jpg')no-repeat;
    background-size:100% ;
}


.title{
    width: r(318);
    height: r(46);
    margin: 0 auto;
    margin-top: r(40);
    img{
        width: 100%;
        height: 100%;
    }
}

#tablecontent{
    width: 80%; 
    height: r(744);
    overflow-y: scroll;
    margin: 0 auto;
}
table{
     width: 100%;
     height: r(744); 
     border: r(1) solid #e7c598;
     
     tr{
         
         td{
         width: 100%;
         height: r(89);
         border-bottom: r(1) solid #e7c598;
         position: relative;
        }
        
        &:first-child{
            #ranking{
                 display: inline-block;
                 font-size: r(30);
                 font-weight: bold;
                 position: absolute;
                 left: r(40);
                 top: r(32);
                 color: #dda27f;
             }
             #guang{
                 display: inline-block;
                 width: r(18);
                 height: r(11);
                 background: url('../img/first.png')no-repeat;
                 background-size:100% ;
                 position: absolute;
                 left: r(41);
                 top: r(21);
             }
        }
         &:nth-child(2){
            #ranking{
                 display: inline-block;
                 font-size: r(30);
                 font-weight: bold;
                 position: absolute;
                 left: r(40);
                 top: r(32);
                 color: #dda27f;
             }
             #guang{
                 display: inline-block;
                 width: r(18);
                 height: r(11);
                 background: url('../img/second.png')no-repeat;
                 background-size:100% ;
                 position: absolute;
                 left: r(41);
                 top: r(21);
             }
        }
         &:nth-child(3){
            #ranking{
                 display: inline-block;
                 font-size: r(30);
                 font-weight: bold;
                 position: absolute;
                 left: r(40);
                 top: r(32);
                 color: #dda27f;
             }
             #guang{
                 display: inline-block;
                 width: r(18);
                 height: r(11);
                 background: url('../img/third.png')no-repeat;
                 background-size:100% ;
                 position: absolute;
                 left: r(41);
                 top: r(21);
             }
        }
     } 
     #ranking{
         display: inline-block;
         font-size: r(30);
         color: white;
         position: absolute;
         left: r(40);
         top: r(32);
     }
     #headphoto{
         display: inline-block;
         width: r(63);
         height: r(60);
         position: absolute;
         left: r(96);
         top: r(18);
         img{
             width: 100%;
             height: 100%;
         }
     }
     #name{
         font-size: r(10);
         color: #e5bb91;
         position: absolute;
         left: r(177);
         top: r(41);
     }
     #guestsnumber{
         font-size: r(18);
         color: #e5bb91;
         position: absolute;
         right: r(40);
         top: r(40);
     }
}


#myranking{
    width: 80%;
    height: r(88);
    margin: 0 auto;
    position: relative;
    border: r(1) solid #e7c598;
     #ranking{
         display: inline-block;
         font-size: r(30);
         color: white;
         position: absolute;
         left: r(40);
         top: r(32);
     }
     #headphoto{
         display: inline-block;
         width: r(63);
         height: r(60);
         position: absolute;
         left: r(96);
         top: r(18);
         img{
             width: 100%;
             height: 100%;
         }
     }
     #name{
         font-size: r(10);
         color: #e5bb91;
         position: absolute;
         left: r(177);
         top: r(41);
     }
     #guestsnumber{
         font-size: r(18);
         color: #e5bb91;
         position: absolute;
         right: r(40);
         top: r(40);
     }
    
}

#backBtn{
    display: inline-block;
    width: r(41);
    height: r(41);
    position: absolute;
    right: r(56);
    bottom: r(25);
    img{
        width: 100%;
        height: 100%;
    }
}